<style>
    .kt-screen-title{
        height:40px;line-height:40px;margin-bottom:15px;
    }
</style>

<div class="kt-screen-title">
    <form class="layui-form">
        <div class="layui-input-inline">
            <select class="create_time">
                <option>选择性观赏</option>
                <option>本周</option>
                <option>本月</option>
                <option>今年</option>
                <option>之前</option>
            </select>
        </div>

        <div class="layui-input-inline" style="float: right;">
            <button type="button" class="layui-btn layui-btn-sm">记录生活</button>
        </div>
    </form>
</div>

<div class='container_table layui-row'>
    <ul id="kt-user-photos">

    </ul>
</div>


<script>
    layui.use([
        'jquery',
        'flow'
    ], function () {
        var $ = layui.jquery;
        var flow = layui.flow;

        // 动态加载css
        $('<link>').attr({
            type: 'text/css',
            rel: "stylesheet",
            href: '/html/css/user-photos.css'
        }).appendTo("head");

        // 流加载
        flow.load({
            elem: '#kt-user-photos' //流加载容器。
            ,isAuto: false
            ,isLazyimg: true
            ,done: function(page, next){ //加载下一页
                //模拟插入
                setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < 8; i++){

                        var str = '<li class="layui-col-md3 layui-col-sm4 layui-col-xs6">\n' +
                            '            <div class="bg">\n' +
                            '                <img src="/html/images/news/img01.jpg" onload="KtImgLoad(this);" onerror="KtImgError(this);" />\n' +
                            '            </div>\n' +
                            '            <div class=\'info\'>\n' +
                            '                <h3>北京 通州</h3>\n' +
                            '                <p> &nbsp; &nbsp; 如果有一天，你嫁为人妻，青别忘乐，曲你是我币生的梦香昂！</p>\n' +
                            '            </div>\n' +
                            '        </li>';

                        lis.push(str)
                    }
                    next(lis.join(''), page < 8); //假设总页数为 6

                    // 用户相册
                    layer.photos({
                        photos: '#kt-user-photos'
                        ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                        ,closeBtn:true
                        ,tab: function(pic, layero){
                        }
                    });

                }, 500);
            }
        });

        // 个人中心相册部分事件
        var getDirection = function (ev, obj) {
            var w = obj.offsetWidth,
                h = obj.offsetHeight,
                x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)),
                y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)),
                d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;
            return d;
        };

        var addClass = function ( ev, obj, state ) {
            if( state == 'in' ){

                state1 = 'out';

            }else{

                state1 = 'in';

            }

            obj.classList.remove( state1 + '-top' );
            obj.classList.remove( state1 + '-right' );
            obj.classList.remove( state1 + '-bottom' );
            obj.classList.remove( state1 + '-left' );

            var direction = getDirection( ev, obj );

            switch ( direction ) {
                case 0 : class_suffix = '-top';    break;
                case 1 : class_suffix = '-right';  break;
                case 2 : class_suffix = '-bottom'; break;
                case 3 : class_suffix = '-left';   break;
            }

            obj.classList.add( state + class_suffix );

        };

        // bind events
        $(document).on('mouseover', '.container_table li', function (ev) {
            this.children[1].style.display = 'block';
            addClass( ev, this, 'in' );
        });

        $(document).on('mouseout', '.container_table li', function (ev) {
            addClass( ev, this, 'out' );
        });

        $(document).on('animationend', '.container_table li', function (ev) {
            if( this.className.indexOf(' out-') >= 0){

                this.children[1].style.display = 'none';

            }else{

                this.children[1].style.display = 'block';

            }
        });

    });
</script>